<template>
  <div class="frontend-layout">
    <!-- 响应式头部导航 -->
    <header class="header" :class="{ 'is-mobile': isMobile }">
      <div class="header-left">
        <div class="logo">
          <img src="@/assets/logo.jpeg" alt="Logo" />
        </div>
        <el-button v-if="isMobile" class="menu-btn" @click="toggleMenu">
          <el-icon><Menu /></el-icon>
        </el-button>
      </div>

      <nav
        class="nav"
        :class="{ 'nav-mobile': isMobile, 'nav-active': isMenuOpen }"
      >
        <el-menu
          :mode="isMobile ? 'vertical' : 'horizontal'"
          :background-color="'transparent'"
          :text-color="'var(--text-color)'"
          :active-text-color="'var(--primary-color)'"
          :router="true"
          :default-active="currentRoute"
          class="nav-menu"
        >
          <el-menu-item index="/">{{ $t("nav.home") }}</el-menu-item>
          <el-menu-item index="/about">{{ $t("nav.about") }}</el-menu-item>
          <el-menu-item index="/products">{{
            $t("nav.products")
          }}</el-menu-item>
          <el-menu-item index="/contact">{{ $t("nav.contact") }}</el-menu-item>
        </el-menu>
      </nav>

      <div class="header-right">
        <!-- 语言切换 -->
        <div class="language-switch" style="width: 100px">
          <el-select
            v-model="userStore.userInfo.language"
            @change="userStore.setLanguage"
          >
            <el-option label="中文" value="zh" />
            <el-option label="English" value="en" />
            <el-option label="日本語" value="ja" />
          </el-select>
        </div>

        <!-- 后台入口 -->
        <el-button v-if="userStore.userInfo?.role === 'admin'" type="primary" class="admin-btn" @click="goToAdmin">
          <el-icon><Setting /></el-icon>
          {{ $t("nav.adminLogin") }}
        </el-button>
        
        <!-- 登录按钮，只在未登录时显示 -->
        <el-button v-if="!userStore.isLoggedIn" type="default" class="login-btn" @click="goToLogin">
          {{ $t("nav.login") }}
        </el-button>
        
        <!-- 用户头像下拉菜单，只在登录后显示 -->
        <el-dropdown v-if="userStore.isLoggedIn" trigger="click">
          <div class="user-avatar">
            <el-avatar :size="32" :src="userStore.userInfo.avatar || defaultAvatar">
              {{ userStore.userInfo.username?.substring(0, 1).toUpperCase() || 'U' }}
            </el-avatar>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToUserInfo">
                <el-icon><User /></el-icon>
                {{ $t("nav.profile") }}
              </el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout">
                <el-icon><SwitchButton /></el-icon>
                {{ $t("nav.logout") }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <main class="main-content">
      <router-view></router-view>
    </main>

    <footer class="footer">
      <p>&copy; 2024 LED Lighting. All rights reserved.</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted, computed, onUnmounted } from "vue";
import { useUserStore } from "@/store/user";
import { Setting, User, SwitchButton, Menu, ArrowRight } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';

const router = useRouter();
const route = useRoute();
const { locale } = useI18n();
const userStore = useUserStore();

// 默认头像
const defaultAvatar = ref('/avatar-default.png');

// 当前路由
const currentRoute = computed(() => route.path);
const isMenuOpen = ref(false);
// 响应式状态
const isMobile = ref(window.innerWidth <= 768);
const currentLocale = computed({
  get: () => locale.value,
  set: (value: string) => (locale.value = value),
});

const goToAdmin = () => {
  router.push("/admin");
};

const goToLogin = () => {
  router.push("/login");
};

const goToUserInfo = () => {
  router.push("/user/profile");
};

const handleLogout = () => {
  ElMessageBox.confirm('您确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.logout();
    router.push('/');
  }).catch(() => {});
};

// 方法
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};

// 响应式处理
const handleResize = () => {
  isMobile.value = window.innerWidth <= 768;
  if (!isMobile.value) {
    isMenuOpen.value = false;
  }
};

onMounted(() => {
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<style scoped lang="scss">
.frontend-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--front-bg);
  color: var(--front-text);

  // 玻璃态效果基础类
  .glass-effect {
    backdrop-filter: blur(var(--front-glass-blur));
    -webkit-backdrop-filter: blur(var(--front-glass-blur));
    background-color: var(--front-glass-bg);
  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--front-header-height);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(230, 230, 230, 0.5);
    transition: var(--front-transition);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04);

    // 玻璃态主题特殊处理
    &.theme-dark-glass {
      backdrop-filter: blur(var(--front-glass-blur));
      -webkit-backdrop-filter: blur(var(--front-glass-blur));
      background-color: var(--front-glass-dark-bg);
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 20px;

      .logo {
        height: 44px;
        margin: 10px 0;
        transition: var(--front-transition);
        
        &:hover {
          transform: scale(1.05);
        }

        img {
          height: 100%;
          object-fit: contain;
          border-radius: 8px;
        }
      }

      .menu-btn {
        display: none;
        color: var(--front-text);
        background: transparent;
        border: none;
        font-size: 24px;
        cursor: pointer;
        transition: var(--front-transition);
        
        &:hover {
          color: var(--front-primary);
        }
        
        @media screen and (max-width: 768px) {
          display: block;
        }
      }
    }

    .nav {
      flex: 1;
      display: flex;
      justify-content: center;

      .nav-menu {
        background-color: transparent;
        border: none;
        display: flex;
        gap: 16px;

        .el-menu-item {
          height: var(--front-header-height);
          line-height: var(--front-header-height);
          color: var(--front-text);
          font-size: 16px;
          font-weight: 500;
          padding: 0 20px;
          border-bottom: 3px solid transparent;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          
          &:hover {
            color: var(--front-primary);
            background-color: transparent;
            transform: translateY(-2px);
          }
          
          &.is-active {
            color: var(--front-primary);
            border-bottom-color: var(--front-primary);
            font-weight: 600;
            background-color: rgba(var(--front-primary-rgb), 0.05);
          }
        }
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;

      .language-switch {
        :deep(.el-select) {
          .el-input__wrapper {
            background-color: transparent;
            border-color: rgba(var(--front-primary-rgb), 0.2);
            border-radius: 20px;
            box-shadow: none;
            transition: all 0.3s ease;
            padding: 0 12px;
            
            &:hover {
              border-color: var(--front-primary);
              box-shadow: 0 0 0 1px var(--front-primary-light);
            }
            
            &.is-focus {
              border-color: var(--front-primary);
              box-shadow: 0 0 0 1px var(--front-primary-light);
            }
          }
          
          .el-input__inner {
            color: var(--front-text);
            font-size: 14px;
            height: 32px;
          }
        }
      }

      .admin-btn {
        background: linear-gradient(45deg, var(--front-primary), var(--front-primary-light));
        border: none;
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 500;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 6px;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 15px rgba(var(--front-primary-rgb), 0.3);
        }
        
        .el-icon {
          font-size: 16px;
        }
      }

      .login-btn {
        background: transparent;
        border: 1px solid var(--front-primary);
        color: var(--front-primary);
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 500;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        &:hover {
          transform: translateY(-2px);
          background-color: var(--front-primary-light);
          box-shadow: 0 4px 12px rgba(var(--front-primary-rgb), 0.15);
        }
      }

      .user-avatar {
        cursor: pointer;
        transition: all 0.3s ease;
        
        .el-avatar {
          border: 2px solid transparent;
          transition: all 0.3s ease;
          
          &:hover {
            transform: scale(1.05);
            border-color: var(--front-primary);
          }
        }
      }
    }
  }

  .main-content {
    flex: 1;
    margin-top: var(--front-header-height);
    padding: 30px 40px;
    background-color: var(--front-bg);
    min-height: calc(100vh - var(--front-header-height));
    
    // 添加内容区域动画
    animation: fadeIn 0.5s ease;
    
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  .footer {
    padding: 50px 40px;
    background-color: var(--front-bg-secondary);
    border-top: 1px solid var(--front-border);
    text-align: center;
    color: var(--front-text-secondary);
    
    p {
      font-size: 14px;
      opacity: 0.8;
      transition: all 0.3s ease;
      
      &:hover {
        opacity: 1;
        color: var(--front-primary);
      }
    }
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .frontend-layout {
    .header {
      padding: 0 15px;

      .nav {
        position: fixed;
        top: var(--front-header-height);
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 15px;
        transform: translateY(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
        border-bottom: 1px solid rgba(230, 230, 230, 0.5);
        z-index: 99;
        
        &.nav-active {
          transform: translateY(0);
        }

        &.theme-dark-glass {
          backdrop-filter: blur(var(--front-glass-blur));
          -webkit-backdrop-filter: blur(var(--front-glass-blur));
          background-color: var(--front-glass-dark-bg);
        }
        
        .nav-menu {
          flex-direction: column;
          width: 100%;
          
          .el-menu-item {
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin: 5px 0;
            border-radius: var(--front-radius);
            border-bottom: none;
            
            &.is-active {
              background-color: var(--front-primary-light);
              color: var(--front-primary);
              font-weight: 600;
            }
            
            &:hover {
              background-color: var(--front-bg-light);
              transform: none;
            }
          }
        }
      }

      .header-right {
        .language-switch {
          display: none;
        }

        .admin-btn, .login-btn {
          padding: 6px 12px;
          font-size: 14px;
        }

        .user-avatar {
          display: block;
          
          .el-avatar {
            width: 28px;
            height: 28px;
            font-size: 12px;
          }
        }
      }
    }

    .main-content {
      padding: 20px 15px;
    }
    
    .footer {
      padding: 30px 15px;
    }
  }
}
</style>
